<template>
    <header id='head_top'>

        <slot name='logo'></slot>
        <slot name='search'></slot>

        <section class="channel_list" v-if="channelList">
            <div class="cl_menu_div">
                <ul class="cl_menu">
                    <router-link tag="li" :to="`/home/${item.menu_id}`" v-for="item in nav" :key="item.menu_id">{{ item.menu_name }}</router-link>
                </ul>
            </div>
			<div class="cl_search">
				<svg slot="icon" class="svg-search">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
                </svg>
			</div>
        </section>

        <section class="found" v-if="found">
            <div class="found_menu_div">
                <ul class="found_menu">
                    <router-link tag="li" to="/found/ip">IP系列</router-link>
                    <router-link tag="li" to="/found/spec">专题</router-link>
                    <router-link tag="li" to="/found/rank/2">榜单</router-link>
                </ul>
            </div>
			<div class="found_search">
				<svg slot="icon" class="svg-search">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
                </svg>
			</div>
        </section>

        <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
            <div class="div-goback">
                <svg slot="icon" class="svg-goback">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#goback"></use>
                </svg>
            </div>
        </section>

        <!-- <router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' class="head_login">
            <svg class="user_avatar" v-if="userInfo">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
            </svg>
            <span class="login_span" v-else>登录|注册</span>
        </router-link> -->

        <section class="title_head ellipsis" v-if="headTitle">
            <span class="title_text">{{headTitle}}</span>
        </section>
        <slot name="edit"></slot>
        <slot name="msite-title"></slot>
        <slot name="changecity"></slot>
        <slot name="changeLogin"></slot>
    </header>
</template>

<script>
    import { getmenu } from '@/api'
    export default {
    	data(){
            return{
                nav: null,
            }
        },
        mounted(){
            //获取频道列表
            if(this.$route.path.indexOf('home') !== -1){                
                getmenu().then(res => {
                    let nav = res.data;
					nav.reverse();
					nav.length = 9;
                    this.nav = nav;
                });
            }
        },
        props: ['channelList', 'found', 'signinUp', 'headTitle', 'goBack'],
        computed: {
        },
        methods: {
        },

    }

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    #head_top{
        background-color: $fc;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        @include wh(100%, 1.95rem);
    }
    .head_goback{
        left: 0;
        @include wh(1.95rem, 1.95rem);
    }
    .div-goback{
        @include wh(1.95rem, 1.95rem);
        .svg-goback {
            margin-top: 25%;
            margin-left: 25%;
            @include wh(50%, 50%);
        }
    }
    .head_login{
        right: 0.55rem;
        @include sc(0.65rem, #fff);
        @include ct;
        .login_span{
            color: #fff;
        }
        .user_avatar{
            fill: #fff;
            @include wh(.8rem, .8rem);
        }
    }
    .title_head{
        @include center;
        width: 50%;
        text-align: center;
        .title_text{
            line-height: 1.95rem;
            font-size: 0.7rem;
            text-align: center;
        }
    }
    .channel_list {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        .cl_menu_div {
            width: 100%;
            overflow:scroll; 
            -webkit-overflow-scrolling:touch;
        }
        .cl_menu {
            padding:0 0.7rem;
            width: 19rem;
            line-height: 1.95rem;
            font-size: 0.7rem;
            display: flex;
            justify-content: space-between;
            li {
                &.active {
                    color: $pink;
                }
            }
        }
        .cl_search {
            box-shadow: 0px 0px 0.5rem rgba(0, 0, 0, .1);
            @include wh(1.95rem, 1.95rem);
            .svg-search {
                fill: $pink;
                margin-top: 25%;
                margin-left: 25%;
                @include wh(50%, 50%);
            }
        }
    }
    .found {
        position: relative;
        overflow: hidden;
        .found_menu_div {
            padding:0  20%;
            width: 100%;
        }
        .found_menu {
            padding:0 0.7rem;
            line-height: 1.85rem;
            font-size: 0.7rem;
            display: flex;
            justify-content: space-between;
            li {
                &.active {
                    color: $pink;
                    border-bottom: 0.1rem solid $pink;
                }
            }
        }
        .found_search {
            position: absolute;
            top: 0;
            right: 0;
            @include wh(1.95rem, 1.95rem);
            .svg-search {
                fill: $pink;
                margin-top: 25%;
                margin-left: 25%;
                @include wh(50%, 50%);
            }
        }
    }
    
</style>
